<template>
  <div class="information">
    <titleText title="消息中心"></titleText>
    <div class="tabs">
      <div
        @click="selectTab(index)"
        class="tabs_item"
        :class="index == newsIndex ? 'active_item' : ''"
        v-for="(item, index) in newsList"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="platform" v-loading="loading">
      <div
        class="platform_item"
        v-for="(item, index) in newsInfoList"
        :key="index"
        @click="goDetails(item)"
      >
        <template v-if="newsIndex == 0">
          <div class="item_img" v-if="item.fengmiantu">
            <el-image :src="item.fengmiantu" :lazy="true" fit="cover" />
          </div>
        </template>
        <template v-else>
          <div class="item_img" v-if="item.freecourselist_fengmiantu">
            <el-image
              :src="item.freecourselist_fengmiantu"
              :lazy="true"
              fit="cover"
            />
          </div>
        </template>

        <div class="item_text">
          <div class="item_title">
            <div class="item_name">{{ item.biaoti }}</div>
            <div class="item_time">{{ item.create_time }}</div>
          </div>
          <template v-if="newsIndex == 0 || newsIndex == 1">
            <div class="item_tip" v-if="newsIndex == 0">{{ item.jianjie }}</div>
            <div class="item_tip" v-if="newsIndex == 1">{{ item.neirong }}</div>
          </template>
          <template v-else>
            <div class="item_tip_2"></div>
          </template>
        </div>
      </div>
    </div>
    <div class="no_data" v-if="newsInfoList.length == 0 && !loading">
      <img class="no_img" src="../../assets/default/12.png" alt="" />
    </div>
    <paging
      :total="total"
      :pageSize="pageSize"
      @pageChange="pageChange"
    ></paging>
  </div>
</template>


<script name="myInformation" setup>
import { post65eaedb4d268c, post65eaee1c5042d } from "@/utils/api.js";
import titleText from "./titleText.vue";
import paging from "@/components/paging.vue";
import { useRouter } from "vue-router";
import { ref, reactive, onMounted } from "vue";
let loading = ref(true);
let pageNum = ref(1);
let pageSize = ref(10);
let total = ref(0);
let newsList = reactive([
  {
    name: "平台公告",
    num: 0,
  },
  {
    name: "订单消息",
    num: 0,
  },
  {
    name: "课程消息",
    num: 0,
  },
]);
let newsIndex = ref(0);

function selectTab(index) {
  newsIndex.value = index;
  pageNum.value = 1;
  loading.value = true;
  if (newsIndex.value == 0) {
    getPlatformList();
  } else {
    getOrderList();
  }
}

let router = useRouter();
function goDetails(item) {
  if (newsIndex.value == 0) {
    router.push({
      path: "/platformDetails",
      query: {
        id: item.aid,
      },
    });
  } else if (newsIndex.value == 1) {
    router.push({
      path: "/MyOrder/orderDetails",
      query: {
        order_sn: item.dingdanhao,
      },
    });
  } else if (newsIndex.value == 2) {
    router.push({
      path: "/details",
      query: {
        aid: item.freecourselist_id,
      },
    });
  }
}

onMounted(() => {
  getPlatformList();
});
// 分页变化
function pageChange(e) {
  pageNum.value = e;
  loading.value = true;
  if (newsIndex.value == 0) {
    getPlatformList();
  } else {
    getOrderList();
  }
}

// 平台公告列表
let newsInfoList = reactive([]);
function getPlatformList() {
  post65eaedb4d268c({
    page: pageNum.value,
    list_rows: pageSize.value,
  }).then((res) => {
    // console.log(res);
    loading.value = false;
    if (res.code == 1) {
      total.value = res.data.total;
      newsInfoList = res.data.data;
    }
  });
}
// 订单、课程消息列表
function getOrderList() {
  post65eaee1c5042d({
    xiaoxileixing: newsIndex.value,
    page: pageNum.value,
    list_rows: pageSize.value,
  }).then((res) => {
    console.log(res);
    loading.value = false;
    if (res.code == 1) {
      total.value = res.data.total;
      newsInfoList = res.data.data;
    }
  });
}
</script>

<style lang="scss" scoped>
.information {
  padding: 18px 16px;
  background: #fff;
  min-height: 437px;
}
.tabs {
  display: flex;
  align-items: center;
  padding: 13px 0;
  .tabs_item {
    margin-right: 25px;
    color: #666;
    font-size: 9px;
    cursor: pointer;
  }
  .active_item {
    color: #1f52ae;
    font-weight: bold;
  }
}
.platform {
  .platform_item {
    border: 1px solid #e5e5e5;
    padding: 8px;
    border-radius: 3px;
    margin-bottom: 8px;
    display: flex;
    cursor: pointer;
    .item_img {
      width: 40px;
      height: 40px;
      border-radius: 3px;
      margin-right: 8px;
      overflow: hidden;
    }
    .item_text {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .item_title {
        font-size: 8px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item_name {
          flex: 1;
        }
        .item_time {
          width: 50px;
          font-size: 6px;
          color: #666;
        }
      }
      .item_tip {
        margin-top: 7px;
        font-size: 6px;
        color: #666;
        line-height: 6px;
      }
      .item_tip_2 {
        margin-top: 12px;
      }
    }
  }
}
</style>